/**
* @description: 待办工单 -》 通信光缆巡视 -》 新增光缆纤芯信息
**/
<!--
  工作台->计划工单->计划工单监控->巡视设备列表->通信光缆详情

-->
<template>
  <div class="cable-detail-wrap">
    <nav-bar class="header" back title="通信光缆详情" @goBack="goBack"/>

    <!-- 切换tab -->
    <div class="cable-info-tab">
      <div class="info-tab-item" :class="currentTab === 'cable' ? ' info-tab-current': ''">新增光缆</div>
      <div class="info-tab-item"  :class="currentTab === 'fibre' ? ' info-tab-current': ''">完善纤芯</div>
    </div>

    <div class="main-container">
      <!-- 光缆信息 -->
      <div class="cable-info" v-if="currentTab === 'cable'">
        <plateTitle title="基本信息" :isRequired="false" class="plate-title"/>
        <view class="cable-info-container">
          <van-cell-group v-for="(item, index) in currentData.visibleProps" :key="index">
            <!-- 不可编辑框 -->
            <van-field
              v-if="item.elementType === 'TEXT'"
              :required="item.isRequired"
              readonly
              input-align="right"
              right-icon="arrow"
              :value="item.value"
              :label="item.title"
              placeholder="点击选择"
              @click="checkInfo(item)"
            />
            <!-- 弹出筛选框 -->
            <van-field
              v-if="item.elementType === 'PICKER'"
              :required="item.isRequired"
              readonly
              clickable
              input-align="right"
              right-icon="arrow"
              v-model="item.text"
              :label="item.title"
              placeholder="点击选择"
              @click="checkPickerList(item)"
            />
            <!-- 弹出日期筛选框 -->
            <van-field
              v-if="item.elementType === 'TIMEPICKER'"
              :required="item.isRequired"
              readonly
              clickable
              input-align="right"
              right-icon="arrow"
              v-model="item.text"
              :label="item.title"
              placeholder="点击选择"
              @click="checkPickerList(item)"
            />
            <!-- 输入框 -->
            <van-field
              v-if="item.elementType === 'INPUT'"
              :type="item.inputType"
              :required="item.isRequired"
              clickable
              input-align="right"
              :value="item.value"
              :label="item.title"
              placeholder="请输入"
              @input="inputBlur($event, item)"
            />
            <!-- 输入带扫码 -->
            <van-field
              v-if="item.elementType === 'INPUT&SCAN'"
              :required="item.isRequired"
              input-align="right"
              right-icon="scan"
              @input="inputBlur($event, item)"
              @click-right-icon="scanQrcode(item)"
              :value="item.value"
              :label="item.title"
            />

          </van-cell-group>
        </view>


        <plateTitle title="巡视信息" :isRequired="false" class="plate-title-1"/>

        <!-- 巡视照片 -->
        <view class="patrol-info-container">
          <view>巡视照片</view>
          <van-divider dashed />
          <div class="image-wrap">
              <div class="image-list">
                <div
                  class="upload-button"
                  v-for="(imgItem, index) in files"
                  :style="{'background-image': `url(${imgItem.bgImg})`}"
                  @click.stop="imageHandle(imgItem, index, 'CHOOSE')"
                >
                  <div v-if="imgItem.img" class="delete-icon" @click.stop="imageHandle(imgItem, index, 'DELETE')">×</div>
                  <img v-if="imgItem.img" :src="imgItem.img" alt="" @click.stop="imageHandle(imgItem, index, 'PREVIEW')">
                </div>
              </div>
            </div>
        </view>

        <!-- 备注 -->
        <view class="remark-info-container">
          <view>备注</view>
          <van-divider dashed />
          <div class="remark-wrap">
          <textarea class="remark-text" v-model="currentData.otherProps.remark">
          </textarea>
          </div>
        </view>


        <!-- 巡视结果 -->
        <view class="result-info-container">
          <van-cell-group v-for="(item, index) in currentData.tourInfoProps" :key="index">
            <!-- 不可编辑框 -->
            <van-field
              v-if="item.elementType === 'TEXT'"
              :required="item.isRequired"
              readonly
              input-align="right"
              :value="item.value"
              :label="item.title"
            />
          </van-cell-group>
        </view>

      </div>

      <!-- 纤芯信息 -->
      <div class="fibre-info" v-else>

        <div class="fibre-rate" v-if="cableInfo.state">
          <div class="fibre-rate-title">已完成</div>
          <div class="fibre-rate-chart">
            <div class="fibre-rate-chart-off" :style="{width: progressWidth}"></div>
          </div>
          <div class="fibre-rate-text">
            <span class="fibre-rate-off">{{ cableInfo.state.VER }}</span>
            <span class="fibre-rate-all">/{{ cableInfo.state.TOTAL }}</span>
          </div>
        </div>

        <div class="fibre-content-title">
          <plateTitle title="纤芯列表">
            <div class="condition-bar">
              <div class="condition-item condition-item-checked">全部 {{ cableInfo.state.TOTAL }}</div>
              <div class="condition-item">未完善 {{ cableInfo.state.NOT_VER }}</div>
              <div class="condition-item">已完善 {{ cableInfo.state.VER }}</div>
            </div>
          </plateTitle>
        </div>

        <div class="fibre-pair-list">
          <div class="fibre-pair-item" v-for="(item, index) in cableInfo.list">
            <div class="replace-index">{{ item.CORE_NAME }}</div>
            <div class="replace-text">{{ '' || item.LIGHT_NAME }}</div>
            <div v-if="item.TOUR_STATE === 0" class="replace-state replace-state-off" @click="completeCable(item)">未完善</div>
            <div v-if="item.TOUR_STATE === 1" class="replace-state replace-state-on" @click="cableDetail(item)">已完善</div>
          </div>
        </div>
      </div>
    </div>

    <!--按钮-->
    <van-button block @click="saveOptical" v-if="currentTab === 'cable'">保存，下一步</van-button>

    <!--选择器-->
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="currentPickerList"
        cancel-button-text="清空"
        @confirm="pickerConfirm"
        @cancel="pickerEmpty"
      />
    </van-popup>

    <!--选择站点-->
    <van-popup v-model="showSite" position="right">
     <select-site @cancel="siteCancel" :selected.sync="siteKeys" />
    </van-popup>

    <van-popup class="van-preview-wrap" v-model="showPreview" @click="showPreview = false">
      <van-swipe>
        <div v-for="(image, index) in files" :key="index">
          <van-swipe-item v-if="image.img" style="text-align: center;">
            <div style="width: 100%; text-align: center;">{{ image.previewName }}</div>
            <img :src="image.img" />
          </van-swipe-item>
        </div>
      </van-swipe>
    </van-popup>
  </div>
</template>

<script>
let infoOptical_add = {
  otherProps: {
    "remark": "",        //备注
  },
  tourInfoProps: { // 显示的属性。包含巡视人和巡视时间
    "tourOperName": {
      title: "巡视人",
      keys: "tourOperName",
      value: "",
      isRequired: false,
      elementType: "TEXT"
    }, //设备名称
    "tourTimStr": {
      title: "巡视时间",
      keys: "tourTimStr",
      value: "",
      isRequired: false,
      elementType: "TEXT"
    },   //所属站点名称
  },
  hideProps: {
    "taskId":"task001",    //所属工单id    //必填
    "aResobjid": "",   //起始站点id
    "zResobjid": "", // 终止站点id
    "tourOperId": "2",      //巡检人ID  必填      userId放进来
    "tourOperName": "2",    //巡检人名称    必填       userName放进来
    "tourTim": "2022-12-19 00:00:00",   //巡检时间 必填
  },
  visibleProps: { // 显示的属性
    "aResname": {
      title: "起始站点名称",
      keys: "aResname",
      value: "",
      isRequired: true,
      elementType: "TEXT"
    },   //起始站点名称
    "zResname": {
      title: "终止站点名称",
      keys: "zResname",
      value: "",
      text: "",
      isRequired: true,
      elementType: "TEXT",
    },   //终止站点名称
    "opticalorder": {
      title: "光缆顺序",
      keys: "opticalorder",
      value: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: { kdCode: "OPTICALORDER" }
    },   //光缆顺序
    "voltageClass": {
      title: "电压等级",
      keys: "voltageClass",
      value: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: { kdCode: "DYDJ" }
    }, //电压等级
    "fiberType": {
      title: "光缆种类",
      keys: "fiberType",
      value: "",
      text: "",
      isRequired: false,
      elementType: "PICKER",
      optionsParams: { kdCode: "FIBERTYPE" }
    },    //光缆种类
    "powerLine": {
      title: "所属线路",
      keys: "powerLine",
      value: "",
      text: "",
      isRequired: false,
      elementType: "INPUT",
      inputType: "text",
    },    //所属线路
    "length": {
      title: "光缆长度Km",
      keys: "length",
      value: "",
      text: "输入光缆长度Km",
      isRequired: false,
      elementType: "INPUT",
      inputType: "number",
    },   //光缆长度
    "lineNumber1": {
      title: "纤芯总数",
      keys: "lineNumber1",
      value: "",
      text: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: { kdCode: "CORENUMBER"}, // 获取options需要的参数
    },  //纤芯总数
    "runState": {
      title: "运行状态",
      keys: "runState",
      value: "",
      text: "",
      isRequired: true,
      elementType: "PICKER",
      optionsParams: {kdCode: "DYZT"}, // 获取options需要的参数
    },  //运行状态

  }
}

let fileTemplate = [
  {
    name: "EQUIPMENT.jpg",
    previewName: "设备照片",
    type: "EQUIPMENT",
    bgImg: require("../../../../../static/img/bg_shebei.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "NAMEPLATE.jpg",
    previewName: "铭牌照片",
    type: "NAMEPLATE",
    bgImg: require("../../../../../static/img/bg_mingpai.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
  {
    name: "OTHER.jpg",
    previewName: "其他照片",
    type: "OTHER",
    bgImg: require("../../../../../static/img/bg_qita.png"),
    raw: null, // raw文件
    img: '', // 用来显示的照片
  },
];
import config from "../../../../../common/config";
import navBar from "../../../../../components/common/nav-bar";
import plateTitle from '../../../../../components/business/plateTitle.vue';
import selectSite from '../../../../common/selectSite';
import moment from "moment";
import {mapGetters} from "vuex";
import axios from "axios";
import wx from "../../../../../static/common_js/jweixin_1.0.0";


import {Dialog, Toast} from "vant";
export default {
  name: "addCable", // 通信光缆详情
  data () {
    return {
      baseUrl: "", // 基础url
      currentTab: "cable", // 当前显示内容 fibre 纤芯
      currentData: {}, // 当前光缆信息
      currentChangeItem: '', // 当前正在修改的下拉项
      showSite: false, // 是否展示站点选择popup
      siteKeys: {},  // 站点
      currentPickerList: [], // 当前弹出框的列表
      showPicker: false, // 是否显示picker弹出框（表单）
      files: {}, // 照片map
      delList: [], // 被删除的列表，需要和后台交互
      showPreview: false,
      fiber_exam_id: "", // 新增光缆成功后返回的巡视光缆id，用来获取纤芯的列表
      cableInfo: {
        list: [], // 纤芯列表
        state: {}, // 纤芯信息如总多少根，未完善的多少根
      }
    }
  },
  computed: {
    ...mapGetters(["userData"]),
    progressWidth () {
      return Math.round(this.cableInfo.state.VER / this.cableInfo.state.TOTAL * 100) + '%'
    }
  },
  components: {
    navBar,
    plateTitle,
    selectSite
  },
  watch: {
    siteKeys: {
      handler: function (newVal) {
        if (this.currentChangeItem === 'aResname') {
          this.currentData.hideProps['aResobjid'] = newVal.siteId
          this.currentData.visibleProps['aResname'].value = newVal.siteName
        } else if (this.currentChangeItem === 'zResname') {
          this.currentData.hideProps['zResobjid'] = newVal.siteId
          this.currentData.visibleProps['zResname'].value = newVal.siteName
        }
      },
      immediate: true,
      deep: true
    }
  },
  onLoad (options) {
    this.currentData = JSON.parse(JSON.stringify(infoOptical_add));
    config.getOptions.then(res => {
      this.baseUrl = res.firstUrl;
    })
    // 因为业务上未设计纤芯列表页，征用此页的tab为fibre为列表页
    // 具体设计为 如果含有taskId & fiber_exam_id，即认为是已经添加光缆完毕的状态，直接进入纤芯列表

    // this.testCheck();
    // return;

    if (options.fiber_exam_id) {
      this.currentTab = 'fibre';

      this.currentData.hideProps.taskId = options.taskId;
      this.fiber_exam_id = options.fiber_exam_id;
      this.$api.getLineMsgLineExam({fiber_exam_id: this.fiber_exam_id}).then(res => {
        this.cableInfo = {
          list: res.data.fiber_exam_list, // 纤芯列表
          state: res.data.fiber_exam_count, // 纤芯信息如总多少根，未完善的多少根
        }
      })
    } else {
      this.files = JSON.parse(JSON.stringify(fileTemplate));
      // 无taskid，判定为需要新增光缆
      this.currentData.hideProps = {
        "taskId": options.taskId,    //所属工单id    //必填
        "aResobjid": "",   //起始站点id
        "zResobjid": "", // 终止站点id
        "tourOperId": this.userData.userId,      //巡检人ID  必填      userId放进来
        "tourOperName": this.userData.userName,    //巡检人名称    必填       userName放进来
        "tourTim": moment().format('YYYY-MM-DD HH:mm:ss'),   //巡检时间 必填
      }
      this.currentData.tourInfoProps = {
        "tourOperName": {
          title: "巡视人",
          keys: "tourOperName",
          value: this.userData.userName,
          isRequired: false,
          elementType: "TEXT"
        }, //设备名称
        "tourTimStr": {
          title: "巡视时间",
          keys: "tourTimStr",
          value: moment().format('YYYY-MM-DD HH:mm:ss'),
          isRequired: false,
          elementType: "TEXT"
        },   //所属站点名称
      }
    }


  },
  methods: {
    // 已完善的跳转到纤芯详情
    cableDetail (fiberInfo) {
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/cableDetail/fiberDetail?fiberInfo=${JSON.stringify(fiberInfo)}`
      })
    },
    testCheck () {
      this.currentTab = 'fibre';
      this.fiber_exam_id = "85708fe8715643929a43095a8b770dd3";
      this.$api.getLineMsgLineExam({fiber_exam_id: this.fiber_exam_id}).then(res => {
        this.cableInfo = {
          list: res.data.fiber_exam_list, // 纤芯列表
          state: res.data.fiber_exam_count, // 纤芯信息如总多少根，未完善的多少根
        }
      })
    },
    // 点击保存，下一步按钮
    saveOptical () {
      let params = {
        ...this.userData,
        ...this.currentData.hideProps,
        ...Object.values(this.currentData.visibleProps).reduce((prev, item) => {
          prev[item.keys] = item.value;
          return prev
        }, {}),
        ...Object.values(this.currentData.tourInfoProps).reduce((prev, item) => {
          prev[item.keys] = item.value;
          return prev;
        }, {}),
        ...this.currentData.otherProps,
      }

      // 验证
      for (let paramsKey in this.currentData.visibleProps) {
        // 必填项验证
        if (this.currentData.visibleProps[paramsKey].isRequired && !this.currentData.visibleProps[paramsKey].value) {
          Dialog.confirm({
            message: `${this.currentData.visibleProps[paramsKey].title}未填写，请重新填写后提交`,
            showCancelButton: false,
          })
          return;
        }
      }

      Toast.loading({
        duration:0,
        message: '加载中...',
        forbidClick: true,
      })
      // 1.验证填写的光缆信息完整性 2.提交
      this.addOptical(params)
        .then(res => {
          Toast.clear()
          // 重名
          if (res.data.data.reNameState) {
            throw res.data
          }
          if (res.data.data.status) {
            this.fiber_exam_id = res.data.data.objId;
            return Dialog.alert({
              title: '提示',
              message: '添加光缆成功，需要补全全部纤芯信息',
              theme: 'round-button',
              confirmButtonColor: "#417adc"
            })

          } else {
            throw res.data
          }

        })
        .then((res) => {
          this.currentTab = 'fibre';
          return this.$api.getLineMsgLineExam({fiber_exam_id: this.fiber_exam_id})
        }, (error) => {
          Dialog.alert({
            title: '警告',
            message: `添加失败，${error.msg}`,
            theme: 'round-button',
          })
        })
        .then(res => {
          this.cableInfo = {
            list: res.data.fiber_exam_list, // 纤芯列表
            state: res.data.fiber_exam_count, // 纤芯信息如总多少根，未完善的多少根
          }
        })

    },
    // 提交信息交互
    addOptical (params) {
      let param = new FormData()  // 创建form对象
      this.files.forEach((file) => {
        if (file.raw) {
          param.append('files', file.raw, file.name)
        }
      });
      Object.keys(params).forEach(itemKey => {
        param.append(itemKey, params[itemKey]) // 添加form表单中其他数据
      })
      // param.append('files', this.filesRaw[0], '测试')  // 通过append向form对象添加数据
      // 添加请求头
      let config = {
        headers: {'Content-Type': 'multipart/form-data',Authorization: uni.getStorageSync('token') || ''}
      }
      let url = "";
      // #ifndef IGW
      url = "/ap/txksh/kosinManage/rest/api/opticalcable/insertOpticalcable";
      // #endif
      // #ifdef IGW
      url = `${this.baseUrl}/txksh/kosinManage/rest/api/opticalcable/insertOpticalcable`
      // #endif

      return axios.post(url, param, config)
    },
    // 取消选择站点
    siteCancel(){
      this.showSite = false
    },
    // 可以进行选择的东西，如所属站点
    checkInfo (item) {

      if (item.keys === "aResname") {
        this.siteKeys = {
          siteId: this.currentData.hideProps['aResobjid'],
          siteName: this.currentData.visibleProps.aResname.value,
        }
        this.currentChangeItem = item.keys;
        this.showSite = true
      } else if(item.keys === "zResname") {
        this.siteKeys = {
          siteId: this.currentData.hideProps['zResobjid'],
          siteName: this.currentData.visibleProps.zResname.value,
        }
        this.currentChangeItem = item.keys;
        this.showSite = true
      }

    },
    // 弹出式选择框（新增业务）
    checkPickerList (optionItem) {
      this.currentChangeItem = optionItem.keys;
      // 获取可选列表
      this.$api.todoTaskApi.selectList_Optical(optionItem.optionsParams).then(res => {
        this.currentPickerList = res.data.list.map(item => {
          return {
            origin: item,
            text: item.NAME,
            value: item.BRIEFNAME,
          }
        });
        this.showPicker = true;
      });
    },
    // picker确认选择(所有下拉)
    pickerConfirm (selectedOption) {
      this.currentData.visibleProps[this.currentChangeItem].text = selectedOption.text;
      this.currentData.visibleProps[this.currentChangeItem].value = selectedOption.value;
      this.showPicker = false;
    },
    // 清空已选
    pickerEmpty (selectedOption) {
      this.showPicker = false;
      selectedOption.text = "";
      selectedOption.value = "";
      this.currentData.visibleProps[this.currentChangeItem].text = "";
      this.currentData.visibleProps[this.currentChangeItem].value = "";
    },
    // 为输入框时失去焦点采集输入值
    inputBlur (value, item) {
      this.currentChangeItem = item.keys;
      this.currentData.visibleProps[this.currentChangeItem].value = value;
    },
    goBack() {
      // uni.navigateBack();
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/cableTour?taskId=${this.currentData.hideProps.taskId}`
      })
    },
    imageHandle (imgItem, imgIndex, handleType) {
      if (handleType === 'CHOOSE') {
        this.choosePhoto(imgItem, imgIndex);
      } else if (handleType === 'PREVIEW') {
        this.showPreview = true;
      } else if (handleType === 'DELETE') {
        Dialog.confirm({
          message: `是否确认删除${imgItem.previewName}`
        })
          .then(() => {
            this.$set(this.files, imgIndex, {
              ...this.files[imgIndex],
              raw: null,
              img: ''
            })
            this.delList.includes(imgItem.type) ? null: this.delList.push(imgItem.type);
              console.log(this.delList, "delete")

          })
          .catch(() => {
            // on cancel
          })
      }
    },
    choosePhoto(imgItem, index) {
      wx.chooseImage({
        count:3,
        sourceType: ['album','camera'],
        success: (chooseImageRes) => {
          this.h5_url_to_blob(chooseImageRes.localIds[0]).then(res => {
            this.$set(this.files, index, {
              ...this.files[index],
              raw: res,
              img: chooseImageRes.localIds[0]
            })

            if (this.delList.includes(imgItem.type)) {
              this.delList = this.delList.filter(item => {
                if (item === imgItem.type) {
                  return false;
                }

                return true;
              })
            }

          })
        }
      });
    },
    h5_url_to_blob(url) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = function(e) {
          if (this.status == 200) {
            var Blob = this.response;
            // console.log(myBlob)
            resolve(Blob)
            // myBlob现在是对象URL指向的blob。
          }
        };
        xhr.send();
      })
    },
    // 未完善
    completeCable(item) {
      // 跳转至纤芯完善页面
      uni.navigateTo({
        url: `/pages/workBench/todoTask/cableTour/cableDetail/completeFiber?taskId=${this.currentData.hideProps.taskId}&opticalInfo=${JSON.stringify(item)}&source=addCable`
      })
    },
  },

}
</script>

<style lang="scss" scoped>

.cable-detail-wrap {
  .header {
    position: sticky;
    top: 0;
    z-index: 9;
  }
  width: 100vw;
  min-height: 100vh;
  background-color: rgba(242,246,250,1);

  .van-preview-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    .van-swipe {
      width: 100%;
      height: 60%;
    }
    img {
      height: 90%;
    }
  }

  .cable-state{
    width: 100vw;
    height: px2vh(140);
    background-color: #ffffff;
    box-sizing: border-box;
    padding: 0 px2vw(30) 0 px2vw(49);
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cable-state-title {
      font-size: px2vw(42);
    }
    .cable-state-text {
      width: px2vw(220);
      height: px2vh(80);
      border-radius: px2vw(40);
      font-size: px2vw(42);
      display: flex;
      justify-content: center;
      align-items: center;
      font-weight: bold;
      &.cable-state-on {
        color: rgba(255,67,85,1);
        background-color: rgba(255,67,85,0.1);
      }

      &.cable-state-off {
        color: rgba(65,220,131,1);
        background-color: rgba(65,220,131,0.1);
      }
    }
  }

  .cable-info-tab {
    width: calc(100% - #{px2vw(60)});
    height: px2vh(120);
    border-radius: px2vw(20);
    box-sizing: border-box;
    margin: px2vh(40) px2vw(30) px2vh(37);
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    .info-tab-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: rgba(51,51,51,1);
      font-size: px2vw(38);
      &.info-tab-current {
        height: px2vh(100);
        margin-right: px2vw(10);
        border-radius: px2vw(20);
        background-color: rgba(65,122,220,1);
        color: rgba(255,255,255,1);
        font-weight: Bold;
      }
    }
  }

  .main-container {
    height: calc(100vh - #{px2vh(574)});
    overflow: auto;
  }

  .cable-info {
    width: calc(100% - #{px2vw(60)});
    margin: auto;
    padding-bottom: px2vh(30);

    .plate-title-1 {
      margin-top: px2vh(30);
      margin-bottom: px2vh(27);
    }

    .cable-info-container, .result-info-container {
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
    }

    .result-info-container {
      .yellow {
        /deep/.van-cell__value {
          color: #FFAD0E;
        }
      }
      .blue {
        /deep/.van-cell__value {
          color: #417ADC;
        }
      }
      .green {
        /deep/.van-cell__value {
          color: #41DC83;
        }
      }
      .red {
        /deep/ .van-cell__value {
          color: #FF4355;
        }
      }
    }

    .remark-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;
      margin-top: px2vh(40);
      margin-bottom: px2vh(40);

      .remark-wrap {
        background-color: #FAFAFA;
        padding: px2vh(41) px2vw(56) px2vh(77) px2vw(55);
        border-radius: px2vw(20);

        .remark-text {
          height: px2vh(150);
        }
      }
    }

    .patrol-info-container {
      padding: px2vh(70) px2vw(50);
      font-size: px2vw(42);
      color: #666666;
      border-radius: $border-radius-base;
      overflow: hidden;
      background-color: #FFFFFF;

      /deep/ .van-radio {
        margin-right: px2vw(139.5)
      }

      .image-wrap {
        width: 100%;
        display: flex;

        img {
          width: px2vw(215);
          height: px2vw(215);
          margin-right: px2vw(40);
          border-radius: px2vw(6);
        }

        .image-list {
          width: 100%;
          display: flex;
          .upload-button {
            width: px2vw(215);
            height: px2vw(215);
            background-size: cover;
            margin-right: px2vw(40);
            position: relative;
            .delete-icon {
              position: absolute;
              top: px2vw(-20);
              right: px2vw(-20);
              width: px2vw(40);
              height: px2vw(40);
              background-color: rgba(0, 0, 0, 0.7);
              border-radius: 50%;
              color: #fff;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }
        }
      }
    }
  }

  .fibre-info {
    .fibre-rate {
      width: calc(100% - #{px2vw(60)});
      height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(60);
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .fibre-rate-title {
        font-size: px2vw(42);
        color: rgba(65,122,220,1);
        margin-left: px2vw(40);
      }

      .fibre-rate-chart {
        width: px2vw(660);
        height: px2vh(34);
        margin: 0 px2vw(27) 0 px2vw(30);
        background-color: #ECF1FB;
        .fibre-rate-chart-off {
          width: 75%;
          height: 100%;
          background: repeating-linear-gradient(135deg, #417ADC, #417ADC #{px2vw(16)},#B3CAF1 #{px2vw(16)}, #B3CAF1 #{px2vw(32)});
        }
      }

      .fibre-rate-text {
        font-size: px2vw(42);
        margin-right: px2vw(40);
        font-weight: bold;
        color: #7C7C7C;
        .fibre-rate-off {
          color: #417ADC;
        }
      }
    }


  }

  .fibre-content-title {
    width: calc(100% - #{px2vw(80)});
    box-sizing: border-box;
    margin: px2vh(0) px2vw(40) px2vh(18);
    .condition-bar {
      display: flex;
      justify-content: center;
      .condition-item {
        height: px2vh(56);
        background-color: rgba(65,122,220,0.1);
        border: #{px2vw(2)} solid rgba(65,122,220,1);
        color: rgba(65,122,220,1);
        border-radius: px2vw(6);
        font-size: px2vw(30);
        padding: 0 px2vw(16) 0 px2vw(19);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 px2vw(5);
        &:last-child {
          margin-right: 0;
        }
        &.condition-item-checked {
          background-color: rgba(65,122,220,1);
          color: rgba(255,255,255,1);
        }
      }
    }
  }

  .fibre-pair-list {
    .fibre-pair-item {
      width: calc(100% - #{px2vw(60)});
      min-height: px2vh(140);
      border-radius: px2vw(20);
      box-sizing: border-box;
      margin: px2vh(40) px2vw(30) px2vh(40);
      padding: 8px 0;
      background-color: #ffffff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .replace-index {
        margin: 0 px2vw(28) 0 px2vw(40);
        width: px2vw(64);
        height: px2vw(64);
        border-radius: 50%;
        background: radial-gradient(circle at center,#417ADC, #417ADC #{px2vw(23)}, #ffffff #{px2vw(23)},#ffffff #{px2vw(26)}, #417ADC #{px2vw(26)}, #417ADC 100%);
        color: #ffffff;
        font-size: px2vw(36);
        font-weight: bold;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .replace-text {
        width: px2vw(645);
        font-size: px2vw(42);
        color: #666666;
        //white-space: nowrap;
        //text-overflow: ellipsis;
        //overflow: hidden;
      }

      .replace-state {
        font-size: px2vw(42);
        margin-right: px2vw(39);

        &.replace-state-on {
          color: #41DC83;
        }

        &.replace-state-off {
          color: #FF4355;
        }
      }


    }
  }

  /deep/.van-button {
    width: calc(100% - #{px2vw(60)});
    margin: px2vh(50) auto px2vh(71);
    height: px2vh(120);
    color: #fff;
    background-color: #417ADC;
    border: 1px solid #417ADC;
    border-radius: px2vh(60);
  }
}
</style>
